﻿@page "/components/alert"

<DocsPage>
    <DocsPageHeader Title="Alert" SubTitle="An alert is used to notify the user about an important message without interrupting the ongoing task." />
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Title>Simple alerts</Title>
                <Description>There is five severity levels that sets an icon and a color.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <AlertSimpleExample />
            </SectionContent>
            <SectionSource Code="AlertSimpleExample" GitHubFolderName="Alert"  />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Variants</Title>
                <Description>The default variant is normal, addition to that outlined and filled is available.</Description>
            </SectionHeader>
            <SectionHeader>
                <SubTitle>Outlined</SubTitle>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <AlertOutlinedExample />
            </SectionContent>
            <SectionSource Code="AlertOutlinedExample" GitHubFolderName="Alert"  />
            <SectionHeader>
                <SubTitle>Filled</SubTitle>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <AlertFilledExample />
            </SectionContent>
            <SectionSource Code="AlertFilledExample" GitHubFolderName="Alert"  />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Dense</Title>
                <Description>Taking up to much space? set the <CodeInline>Dense</CodeInline> property to true. It removes the vertical padding and lowers the horizontal.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <AlertDenseExample />
            </SectionContent>
            <SectionSource Code="AlertDenseExample" ShowCode="false" GitHubFolderName="Alert"  />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>No Icons</Title>
                <Description>You can disable the alert icons with the bool <CodeInline>NoIcon</CodeInline> set to true.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <AlertNoIconExample/>
            </SectionContent>
            <SectionSource Code="AlertNoIconExample" ShowCode="false" GitHubFolderName="Alert"  />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Rounded and Square</Title>
                <Description>By default the alert is set to rounded corners by your themes default value. If you need a square Alert but not change the theme you can the <CodeInline>Square</CodeInline> property to true.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <AlertSquareExample/>
            </SectionContent>
            <SectionSource Code="AlertSquareExample" ShowCode="false" GitHubFolderName="Alert" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Elevation</Title>
                <Description>The component also accept the <CodeInline>Elevation</CodeInline> property with a scale from 0 to 24.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <AlertElevationExample />
            </SectionContent>
            <SectionSource Code="AlertElevationExample" ShowCode="true" GitHubFolderName="Alert"  />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Snackbar Alerts</Title>
                <Description>You can use the <MudLink Href="/components/snackbar">Snackbar</MudLink> to display Alerts.</Description>
            </SectionHeader>
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>